<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/system/userList' }">员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer viewUserPage">
      <div class="user-file-image">
        <el-image style="width: 120px; height: 120px;border-radius:50%;overflow:hidden;">
          <!-- 默认图片 -->
          <div slot="error" class="image-slot">
            <img width="120" height="120" v-if="user.avatar" :src="user.avatar" />
            <img height="120" width="120" v-if="!user.avatar" src="@/assets/images/default-user-img.png" />
          </div>
        </el-image>
      </div>
      <!-- 表单 -->
      <div class="customform shebaoform">
        <el-form :inline="true" label-width="130px" label-position="left">
          <div class="user-title">基本信息</div>
          <div class="el-form--inline">
            <el-form-item label="姓名">
              <div class="el-input form-control-static">{{user.name}}</div>
            </el-form-item>
            <el-form-item label="身份证号码">
              <div class="el-input form-control-static">{{user.idCard}}</div>
            </el-form-item>
            <el-form-item label="性别">
              <div class="el-input form-control-static">{{user.sex===0 ? '男':'女'}}</div>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="邮箱">
              <div class="el-input form-control-static">{{user.email}}</div>
            </el-form-item>
            <el-form-item label="手机号码">
              <div class="el-input form-control-static">{{user.telephone}}</div>
            </el-form-item>
            <el-form-item label="角色">
              <div class="el-input form-control-static">{{user.roleName}}</div>
            </el-form-item>
          </div>
          <div class="user-title2">
            <span>在职信息</span>
          </div>
          <div class="el-form--inline">
            <el-form-item label="所属部门">
              <div class="el-input form-control-static">{{user.deptName}}</div>
            </el-form-item>
            <el-form-item label="岗位">
              <div class="el-input form-control-static">{{user.jobPosition}}</div>
            </el-form-item>
            <el-form-item label="上级">
              <div class="el-input form-control-static">{{user.parentName}}</div>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="在职状态">
              <div class="el-input form-control-static">{{user.status===0 ? '离职' : '在职'}}</div>
            </el-form-item>
            <el-form-item label="入职时间">
              <div class="el-input form-control-static">{{user.entryDate}}</div>
            </el-form-item>
            <el-form-item label="离职时间">
              <div class="el-input form-control-static">{{user.entryDate}}</div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="page-form-btn">
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="edit">编辑</el-button>
      </div>
      <!-- 表单结束 -->
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "viewUser",
  data() {
    return {
      user:{}
    };
  },
  created(){
    this.init();
  },
  methods: {
    init: function() {
      Http.api.get("user/"+this.$route.query.id).then(res => {
        this.user =res.data;
      });
    },
    edit() {
      this.$router.push({path: "/system/editUser"});
    },
    back(){
      this.$router.go(-1);
    }
  }
};
</script>
